<template>
  <div class="survey">
    <!-- 新建敏捷项目 -->
    <div class="firstinfo">
      <div class="title">
        <div class="des">
          <!-- <img src="@/assets/avatar.png" alt="" /> -->
          <el-select
            placeholder=""
            v-model="value"
            popper-class="popper-select"
            :popper-append-to-body="false"
            @change="selectImg($event)"
          >
            <template slot="prefix">
              <img :src="value" alt="" />
            </template>

            <el-option
              v-for="item in avatars"
              :key="item.Id"
              :label="item.src"
              :value="item.src"
            >
              <div class="proimg">
                <img class="avatar" :src="item.src" />
              </div>
            </el-option>
          </el-select>
          <div class="text">
            <p>{{ newData.project.name }}</p>
            <span>软件敏捷开发项目</span>
          </div>
          <div
            class="level"
            :class="
              newData.project.level <= 100
                ? 'LvOne'
                : newData.project.level > 100 && newData.project.level <= 200
                ? 'LvTwo'
                : 'LvThree'
            "
          >
            lv{{ newData.project.level }}
          </div>
        </div>
        <div class="modify">
          <button class="cancel" @click="changeEdit" v-if="edit === true">
            取消
          </button>
          <button
            class="finish"
            @click="newProject"
            v-preventReClick
            v-if="edit === true"
          >
            提交
          </button>
        </div>
      </div>
      <div class="infotable">
        <table cellpadding="0" cellspacing="0">
          <tr height="120">
            <td width="25%">
              <div class="missioner">
                <span>项目负责人:</span>
                <div class="missionerinfo" v-if="getManagersList.length">
                  <p
                    v-for="item in getManagersList[0].evaluationroleList"
                    :key="item.id"
                  >
                    <span v-if="item.checked === true">{{ item.name }}</span>
                  </p>
                  <img :src="getManagersList[0].avatar" alt="" />
                  <p>{{ getManagersList[0].name }}</p>
                </div>
                <img
                  class="choosemember"
                  @click="selectManagers"
                  src="@/assets/missionerplus.png"
                  alt=""
                />
                <!-- 选择项目负责人 -->
                <!-- <el-dialog
                  :visible.sync="chooseMissioner"
                  :show-close="false"
                  :close-on-click-modal="false"
                  :close-on-press-escape="false"
                  center
                  top="8%"
                  width="70%"
                >
                  <div class="diaheader">选择项目负责人</div>
                  <div class="diacontentbox">
                    <div>
                      <h4
                        style="
                          font-size: 16px;
                          color: #333333;
                          margin-bottom: 14px;
                          margin-top: 0px;
                        "
                      >
                        已选项目负责人
                      </h4>
                      <div class="hadchoosenmembers">
                        <div
                          v-if="
                            !chargeRoleNameList.name &&
                            !chargeRoleNameList.avatar
                          "
                        >
                          暂无人员
                        </div>
                        <div v-else>
                          <div class="choosenmem" slot="reference">
                            <p>{{ chargeRoleNameList.roleName }}</p>
                            <img :src="chargeRoleNameList.avatar" alt="" />
                            <p style="color: #333333">
                              {{ chargeRoleNameList.name }}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="searchbox">
                      <h4
                        style="
                          font-size: 16px;
                          color: #333333;
                          margin: 14px 0px;
                        "
                      >
                        人员列表
                      </h4>
                      <div class="inputborder">
                        <input
                          type="text"
                          placeholder="搜索"
                          class="search"
                          style="border-radius: 25px"
                          v-model="searchPersonName"
                          @keyup.enter="searchPerson"
                        />
                        <i
                          class="el-icon-search icon"
                          @click="searchPerson($event)"
                        ></i>
                      </div>
                    </div>
                    <div class="diacontent" style="text-align: left">
                      <ul>
                        <li v-for="(item, index) in group" :key="index">
                          <img :src="item.avatar" alt="" />
                          <span class="itemName">{{ item.name }}</span>
                          <div
                            v-for="(role, index) in item.evaluationroleList"
                            :key="index"
                            :data-index="role.id"
                            ref="roleChange"
                            @click="selectRole($event, role)"
                          >
                            {{ role.name }}
                          </div>
                          <input
                            class="checkBoxs"
                            v-model="item.checked"
                            name="charge"
                            type="radio"
                            @change="getboxValue($event, item)"
                          />
                        </li>
                      </ul>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="onClose">取 消</el-button>
                    <el-button type="primary" @click="btnOk">确 定</el-button>
                  </span>
                </el-dialog> -->
              </div>
            </td>
            <td colspan="2" width="50%">
              <div class="missioner">
                <span>项目成员:</span>
                <div
                  class="missionerinfo"
                  v-for="members in getMemberList.slice(0, 8)"
                  :key="members.i"
                >
                  <template v-for="ele in members.evaluationroleList">
                    <p v-if="ele.checked === true" :key="ele.id">
                      {{ ele.name }}
                    </p>
                  </template>
                  <img :src="members.avatar" alt="" />
                  <p>{{ members.name }}</p>
                </div>
                <div class="moremissioner" v-if="donemembers.length > 8">
                  <span>等{{ donemembers.length }}人</span>
                </div>
                <img
                  class="choosemember"
                  @click="selectMembers"
                  src="@/assets/missionerplus.png"
                  alt=""
                />
                <!-- 选择项目成员 -->
                <!-- <el-dialog
                  :visible.sync="choosemembers"
                  :show-close="false"
                  :close-on-click-modal="false"
                  :close-on-press-escape="false"
                  center
                  class="customDialog2"
                  width="70%"
                >
                  <div class="diaheader">选择项目成员</div>
                  <div class="diacontentbox">
                    <div>
                      <h4
                        style="
                          font-size: 16px;
                          color: #333333;
                          margin-bottom: 14px;
                          margin-top: 0px;
                        "
                      >
                        已选项目成员
                      </h4>
                      <div class="hadchoosenmembers">
                        <div v-for="item in donemembers" :key="item.id">
                          <div class="choosenmem" slot="reference">
                            <template v-for="ele in item.evaluationroleList">
                              <p v-if="ele.checked === true" :key="ele.id">
                                {{ ele.name }}
                              </p>
                            </template>
                            <img :src="item.avatar" alt="" />
                            <p style="color: #333333">{{ item.name }}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="searchbox">
                      <h4
                        style="
                          font-size: 16px;
                          color: #333333;
                          margin: 14px 0px;
                        "
                      >
                        人员列表
                      </h4>
                      <div class="inputborder">
                        <input
                          type="text"
                          placeholder="搜索"
                          class="search"
                          style="border-radius: 25px"
                          v-model="searchPersonName"
                          @keyup.enter="searchPerson"
                        />
                        <i
                          class="el-icon-search icon"
                          @click="searchPerson($event)"
                        ></i>
                      </div>
                    </div>
                    <div class="diacontent" style="text-align: left">
                      <ul>
                        <li v-for="(item, index) in group" :key="index">
                          <img :src="item.avatar" alt="" />
                          <span class="itemName">{{ item.name }}</span>
                          <div
                            v-for="(role, index) in item.evaluationroleList"
                            :class="role.checked ? 'first' : ''"
                            :key="index"
                            ref="roleChange1"
                            @click="selectRole1(role, item)"
                          >
                            {{ role.name }}
                          </div>
                          <input
                            class="checkBoxs"
                            :checked="item.isSelect"
                            type="checkbox"
                            @change="getboxValue1($event, item)"
                          />
                        </li>
                      </ul>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="onClose1">取 消</el-button>
                    <el-button type="primary" @click="btnOk1">确 定</el-button>
                  </span>
                </el-dialog> -->
              </div>
            </td>
            <td width="25%">
              <div style="display: flex; align-items: center">
                <span class="label">项目进度及状态:</span>
                <div class="domany">
                  <el-progress
                    class="progressBox1"
                    :text-inside="true"
                    :stroke-width="20"
                    :percentage="Number(newData.project.progress)"
                  ></el-progress>
                </div>
                <span class="manystatus">未开始</span>
              </div>
            </td>
            <!--  -->
          </tr>
          <tr>
            <td>
              <span class="label">项目组名称:</span>
              <input
                type="text"
                v-model="newData.project.groupname"
                placeholder="请输入项目组名称"
                v-show="edit === true"
                style="width: 70%"
                maxlength="25"
              />
            </td>
            <td colspan="2">
              <span class="label">项目名称:</span>
              <input
                type="text"
                v-model="newData.project.name"
                maxlength="25"
                placeholder="请输入项目名称"
                v-show="edit === true"
              />
            </td>

            <td>
              <span class="label">客户信息:</span>
              <input
                type="text"
                v-model="newData.project.clientinfo"
                placeholder="请输入客户信息"
                v-show="edit === true"
                maxlength="25"
              />
            </td>
          </tr>
          <tr>
            <td>
              <span class="label">开始时间:</span>
              <el-date-picker
                v-model="newData.project.startdate"
                align="right"
                type="date"
                placeholder="选择项目开始日期"
                v-show="edit === true"
                @blur="handleProjectCycle"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </td>
            <td>
              <span class="label">结束时间:</span>
              <el-date-picker
                v-model="newData.project.enddate"
                align="right"
                type="date"
                placeholder="选择项目结束日期"
                @blur="handleProjectCycle"
                v-show="edit === true"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </td>
            <td>
              <span class="label">项目周期：{{ this.projectCycle }}</span>
            </td>
            <td>
              <span class="label">过期:</span>
              <span>正常</span>
            </td>
          </tr>
          <tr v-if="userType === 1">
            <td>
              <span class="label">项目编号</span>
            </td>

            <td>
              <span class="label">创建人：{{ userName }}</span>
              <!-- <input type="text" /> -->
            </td>
            <td>
              <span class="label">项目等级（1-300）:</span>
              <input
                type="number"
                style="width: 50%"
                v-model.number="newData.project.level"
                oninput="if(value.length>3)value=value.slice(0,3)"
                placeholder="请输入项目等级"
                v-show="edit === true"
                @input="isTrueNum($event)"
              />
            </td>
            <td>
              <span class="label" v-if="this.userType === 1"
                >项目类型：模板</span
              >
              <span class="label" v-else>项目类型：自建</span>
            </td>
          </tr>
          <tr v-if="userType === 1">
            <td colspan="2">
              <span class="label">评分表：</span>
              <el-select
                placeholder="请选择评分表"
                v-model="value1"
                v-show="edit === true"
                style="width: 30%"
              >
                <el-option
                  v-for="item in optionSelect"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </td>
            <td colspan="2">
              <span>课时数：</span>
              <input
                type="number"
                placeholder="请输入课时数"
                v-model.number="newData.project.hours"
                oninput="if(value.length>3)value=value.slice(0,3)"
                @input="isTrueNum1($event)"
              />
            </td>
          </tr>
        </table>
      </div>
      <!-- 添加模块部分 -->
      <div class="funmodule">
        <span>功能模块</span>
        <el-table
          style="width: 100%"
          :data="this.newData.projectmoduleList"
          border
          class="customTable"
          :header-cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
          :cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
        >
          <el-table-column label="模块名称" width="233">
            <template slot="header">
              <span>模块名称</span>
              <button class="addfunc" @click="addNewFunction()"></button>
            </template>
            <template slot-scope="scope">
              <input
                type="text"
                v-model="scope.row.name"
                maxlength="12"
                placeholder="请输入模块名（限制12字）"
                style="outline: none; border: none; text-align: center"
              />
              <button
                @click="delFunction(scope.$index)"
                class="delfunc"
              ></button>
            </template>
          </el-table-column>
          <el-table-column label="模块描述" prop="description">
            <template slot-scope="scope">
              <textarea
                name=""
                id=""
                cols="80"
                rows="3"
                maxlength="200"
                placeholder="请输入描述（限制200字）"
                v-model="scope.row.description"
                style="outline: none; border: none; width: 100%; resize: none"
              ></textarea>
            </template>
          </el-table-column>
          <el-table-column label="需求数量" width="149" prop="demand">
          </el-table-column>
          <el-table-column label="缺陷数量" width="149" prop="defect">
          </el-table-column>
        </el-table>
      </div>
      <div class="funmodule">
        <span>版本迭代</span>

        <el-table
          style="width: 100%"
          :data="this.newData.projectiterationList"
          border
          class="customTable"
          :header-cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
          :cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
        >
          <el-table-column label="版本名" width="233">
            <template slot="header">
              <span style="text-align: center">版本名</span>
              <button class="addfunc" @click="addNewVersion()"></button>
            </template>
            <template slot-scope="scope">
              <input
                type="text"
                v-model="scope.row.name"
                maxlength="12"
                style="outline: none; border: none; text-align: center"
                placeholder="请输入版本名（限制12字）"
              />
              <button
                @click="delVersion(scope.$index)"
                class="delfunc"
              ></button>
            </template>
          </el-table-column>
          <el-table-column label="迭代时间">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.startdate"
                @blur="iterationTime(scope.row)"
                align="right"
                type="date"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>
              <el-date-picker
                v-model="scope.row.enddate"
                @blur="iterationTime(scope.row)"
                align="right"
                type="date"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description">
            <template slot-scope="scope">
              <textarea
                name=""
                id=""
                cols="80"
                rows="5"
                maxlength="200"
                v-model="scope.row.description"
                placeholder="请输入描述（限制200字）"
                style="outline: none; border: none; width: 100%; resize: none"
              ></textarea>
            </template>
          </el-table-column>
          <el-table-column label="需求数量" width="149" prop="demand">
          </el-table-column>
          <el-table-column label="缺陷数量" width="149" prop="defect">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 负责人选择模态框 -->
    <editManageRole ref="child" @getManages="getManages"></editManageRole>
    <!-- 项目成员选择模态框 -->
    <editMembers ref="childMember" @getMembers="getMembers"></editMembers>
  </div>
</template>

<script>
import { buildProject, getSameUser } from '@/api/project/buildProject';
import { getevaluation } from '@/api/project/getevaluation';
import editManageRole from '../editPerson/EditManageRole';
import editMembers from '../editPerson/EditMembers';
export default {
  name: 'survey',
  components: {
    editManageRole,
    editMembers
  },
  data() {
    return {
      edit: true, // 编辑状态
      projectCycle: null, // 项目周期
      searchPersonName: '', // 模糊搜索人员名字
      userid: Number(sessionStorage.getItem('userid')),
      userType: Number(sessionStorage.getItem('usertype')),
      userName: sessionStorage.getItem('username'),
      evaluationid: 0,
      optionSelect: [],
      // 选取评分表后的人员角色
      evaluationroleList: [],
      // 编辑后成员数据
      dtomembers: [],
      // 负责人数据
      chargeRoleNameList: {
        name: '',
        avatar: '',
        id: '',
        roleName: '',
        evaluationroleid: null
      },
      // 新建人员数据集合
      addProjectUserDtoList: [
        // {
        //   projectuser: {
        //     type: 0,
        //     userid: 0
        //   },
        //   projectuserroleList: [
        //     {
        //       evaluationroleid: null,
        //       rolename: ''
        //     }
        //   ]
        // }
      ],
      // 项目数据
      newData:
      {
        project: {
          clientinfo: '',
          code: '',
          content: '',
          // createdid: 0,
          createtime: '',
          departmentid: null,
          enddate: '',
          evaluationid: null,
          groupname: '',
          hours: null,
          id: 0,
          label: 0,
          level: null,
          logo: '',
          managerid: null,
          memo: '',
          name: '',
          parentid: 0,
          phase: 1,
          progress: 0,
          startdate: '',
          status: 1,
          // 项目类型
          type: 2
        },
        // 项目功能模块
        projectmoduleList: [],
        // 项目版本迭代
        projectiterationList: [],

        userType: 0
      },
      // 添加功能数据
      // 添加版本数据
      // label：图片路径 value：方向指向
      value: '/static/project1.png',
      value1: '',
      avatars: [
        {
          src: '/static/project1.png',
          Id: '0'
        },
        {
          src: '/static/project2.png',
          Id: '1'
        },
        {
          src: '/static/project3.png',
          Id: '2'
        },
        {
          src: '/static/project4.png',
          Id: '3'
        },
        {
          src: '/static/project5.png',
          Id: '4'
        }, {
          src: '/static/project6.png',
          Id: '5'
        }
      ],

      group: [],
      choosenmember: 'confirm',
      hadmembers: [],
      donemembers: [],
      manywidth: 0,
      score: true,
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      startTime: '',
      endTime: '',
      chooseMissioner: false,
      choosemembers: false,
      activeIndex: '',
      moremember: false,
      morenum: 0,
      getMemberList: [], // 选择的成员
      getManagersList: [], // 选择的负责人
      changeManagerList: [], // 转换数据结构后的负责人
      changeMembersList: [] // 转换数据结构后的成员
    };
  },
  mounted() {
    // 获取同一机构人员
    getSameUser(this.userid).then(res => {
      // console.log(res);
      this.group = res.data;
    });
    // 获取评分表
    getevaluation(this.userid).then(res => {
      // console.log(res);
      this.optionSelect = res.data;
    });
  },
  methods: {
    // 搜索人员
    searchPerson() {
      // console.log('sousuo', this.searchPersonName);
      getSameUser(this.userid, Number(this.value1), this.searchPersonName).then(res => {
        // console.log(res);
        this.group = res.data;
      });
    },
    // 添加版本和功能模块
    addNewFunction() {
      // console.log('添加成功');
      this.newData.projectmoduleList.push({
        description: '',
        id: 0,
        name: '',
        projectid: 0
      });
    },
    addNewVersion() {
      // console.log('添加成功');
      this.newData.projectiterationList.push({
        description: '',
        id: 0,
        name: '',
        projectid: 0,
        enddate: '',
        startdate: ''
      });
    },
    // 删除版本和功能
    delFunction(val) {
      // console.log('sahnchu', val);
      this.newData.projectmoduleList.splice(val, 1);
    },
    delVersion(val) {
      // console.log('sahnchu');
      this.newData.projectiterationList.splice(val, 1);
    },
    // 项目周期
    handleProjectCycle() {
      let time1 = Date.parse((this.newData.project.startdate));
      let time2 = Date.parse((this.newData.project.enddate));
      if (time1 > time2) {
        this.$message({
          showClose: true,
          type: 'error',
          message: '结束时间不能在开始时间之前'
        });
        return;
      }
      let val = (time2 - time1) / 1000 / 3600 / 24;
      if (val > 0) {
        this.projectCycle = val + '天';
      }
    },
    // 判断版本迭代时间
    iterationTime(value) {
      // console.log(value);
      // if ()
      let endTime = Date.parse(value.enddate);
      let startTime = Date.parse(value.startdate);
      if (endTime < startTime) {
        this.$message({
          showClose: true,
          type: 'error',
          message: '结束时间不能在开始时间之前'
        });
      }
    },
    // 判断输入数字
    isTrueNum(event) {
      // console.log(event.target.value);
      if (event.target.value > 300 || event.target.value <= 0) {
        this.$message({
          showClose: true,
          type: 'error',
          message: '请输入1-300的数字'
        });
        // event.target.value = 1;
      }
    },
    // 判断输入数字课时
    isTrueNum1(event) {
      // console.log(event.target.value);
      if (event.target.value > 1000 || event.target.value <= 0) {
        this.$message({
          showClose: true,
          type: 'error',
          message: '请输入1-999的数字'
        });
        // event.target.value = 1;
      }
    },
    // 编辑取消完成显示
    changeEdit() {
      this.$confirm('是否取消编辑?当前更改的内容将不会保存！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          showClose: true,
          type: 'success',
          message: '编辑内容已取消!'
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    // 选取项目头像
    selectImg(val) {
      // console.log(val);
      this.value = val;
    },
    // 选择负责人角色
    selectRole($event, item) {
      // 将所有样式重置
      // console.log(item);
      this.$refs.roleChange.map(item => {
        item.className = 'sortable both';
      });
      // 选择角色单选
      if ($event.target.className === 'first') {
        $event.target.className = '';
      } else {
        $event.target.className = 'first';
      }
      // 选择角色推送进负责人数组
      this.chargeRoleNameList.roleName = item.name;
      this.chargeRoleNameList.evaluationroleid = item.id;
    },
    // 选择项目成员角色
    selectRole1(role, item) {
      // 多选角色
      role.checked = !role.checked;
      // console.log(item);
      // 单选角色
      // item.evaluationroleList.filter(item => {
      //   if (item.id === role.id) {
      //     // console.log(item);
      //     item.checked = !item.checked;
      //   } else {
      //     item.checked = false;
      //   }
      // });
      // 选择角色推送进负责人数组
      // this.chargeRoleNameList.roleName = item.name;
      // this.chargeRoleNameList.evaluationroleid = item.id;
      // // this.chargeRoleNameList[0].roleName = item.name;
      // console.log('cha', this.chargeRoleNameList);
      // this.addProjectUserDtoList.forEach(son => {
      //   if (son) {
      //     if (son.projectuser.type === 2) {
      //       son.projectuserroleList.evaluationroleList = item.id;
      //       son.projectuserroleList.roleName = item.name;
      //     }
      //   }
      // });
      // this.addProjectUserDtoList.push({ projectuser: { type: 2, userid: this.chargeRoleNameList.id }, projectuserroleList: { evaluationroleid: item.id, roleName: item.name } });

      // 给点击的标签添加一个新的类名
      // this.$refs.roleChange[index].className = this.$refs.roleChange[index].className = 'sortable both' + ' first';
    },
    // 获取负责人信息
    getUser1(id) {
      if (this.value1 === '') {
        getSameUser(id).then(res => {
          // console.log(res.data);
          this.chooseMissioner = true;
          this.group = res.data;
          // 判断是否已经选择
          this.group.forEach(item => {
            if (this.chargeRoleNameList.id === item.id) {
              item.checked = true;
            }
          });
        });
      } else {
        getSameUser(id, Number(this.value1)).then(res => {
          // console.log(res.data);
          this.chooseMissioner = true;
          this.group = res.data;
          // 判断是否已经选择
          this.group.forEach(item => {
            if (this.chargeRoleNameList.id === item.id) {
              item.checked = true;
            }
          });
        });
      }
    },
    // 获取成员信息
    getUser2(id) {
      if (this.value1 === '') {
        getSameUser(id).then(res => {
          this.choosemembers = true;
          this.group = res.data;
          // 给每一个成员添加未选择的状态
          this.group.forEach(item => {
            item.isSelect = false;
          });
          // 成员列表添加默认选择状态
          this.group.forEach(item => {
            this.donemembers.forEach(item2 => {
              if (item.id === item2.id) {
                item.isSelect = true;
                item.evaluationroleList.forEach(ele => {
                  item2.roleName.forEach(ele2 => {
                    if (ele.id === ele2.evaluationroleid) {
                      ele.checked = true;
                    }
                  });
                });
              }
            });
          });
          // 已选成员默认选中
          this.group.forEach(item => {
            if (item.isSelect === true) {
              this.donemembers.push(item);
            }
          });
        });
      } else {
        getSameUser(id, Number(this.value1)).then(res => {
          // console.log(res.data);
          this.choosemembers = true;
          this.group = res.data;
          // 给每一个成员添加未选择的状态
          this.group.forEach(item => {
            item.isSelect = false;
          });
          // 成员列表添加默认选择状态
          this.group.forEach(item => {
            this.donemembers.forEach(item2 => {
              if (item.id === item2.id) {
                item.isSelect = true;
                item.evaluationroleList.forEach(ele => {
                  item2.roleName.forEach(ele2 => {
                    if (ele.id === ele2.evaluationroleid) {
                      ele.checked = true;
                    }
                  });
                });
              }
            });
          });
          // 已选成员默认选中
          this.group.forEach(item => {
            if (item.isSelect === true) {
              this.donemembers.push(item);
            }
          });
        });
      }
    },
    // 负责人弹层取消
    onClose() {
      this.chargeRoleNameList = {};
      this.chooseMissioner = false;
    },
    // 负责人弹层确定
    btnOk() {
      // this.newData.chargeid = this.chargeRoleNameList[0].userId;
      this.chooseMissioner = false;
      // let val = {
      //   projectuser: { type: 2, userid: this.chargeRoleNameList.id }, projectuserroleList: []
      // };
      // if (!this.chargeRoleNameList.evaluationroleid) {
      //   delete val.projectuserroleList;
      // } else {
      //   val.projectuserroleList = [{ evaluationroleid: this.chargeRoleNameList.evaluationroleid, rolename: this.chargeRoleNameList.roleName }];
      // }
      // this.addProjectUserDtoList.push(val);
      // // 保留选取最新的项目负责人
      let len = this.addProjectUserDtoList.length;
      if (len > 1) {
        // console.log(len, 'len');
        this.addProjectUserDtoList.splice(0, len - 1);
      }
      // console.log(this.addProjectUserDtoList, '负责人确定之后');
    },
    // 项目成员弹层取消
    onClose1() {
      this.donemembers = [];
      this.choosemembers = false;
    },
    // 项目成员弹层确定
    btnOk1() {
      // console.log(this.addProjectUserDtoList, 'cehngyuan1');
      // this.addProjectUserDtoList.map((item, index) => {
      //   console.log('进入', item, index);
      //   if (item.projectuser.type === 1) {
      //     // delete this.addProjectUserDtoList[index];
      //     this.$delete(this.addProjectUserDtoList, index);
      //     console.log('删除', item, index);

      //     // console.log(index);
      //   }
      // });
      // console.log(this.addProjectUserDtoList, 'cehngyuan1');

      // let arr = this.addProjectUserDtoList.filter((item, index) => {
      //   console.log('进入', item, index);
      //   if (item.projectuser.type === 1) {
      //     // this.addProjectUserDtoList.splice(index, 1);
      //     delete this.addProjectUserDtoList[index];
      //     console.log('删除', item, index);
      //   }
      // });
      // this.addProjectUserDtoList = arr;
      this.choosemembers = false;
      // 将现有选择上的成员放进dtomembers数组
      this.donemembers.forEach(item => {
        this.dtomembers.push({
          projectuser: { type: 1, userid: item.id }, List: [...item.evaluationroleList], projectuserroleList: []
        });
      });
      // 将角色分配进后台需要的格式数据里面
      this.dtomembers.forEach((item, index) => {
        item.List.forEach(ele => {
          if (ele.checked === true) {
            item.projectuserroleList.push({
              'evaluationroleid': ele.id,
              'rolename': ele.name
            });
          }
        });
      });
      // 删除List数组
      this.dtomembers.forEach(item => {
        delete item.List;
      });
      // this.donemembers.forEach(item => {
      //   this.addProjectUserDtoList.push({ projectuser: { type: 1, userid: item.id }, projectuserroleList: [{ evaluationroleid: item.evaluationroleid, rolename: item.roleName }] });
      // });
      // console.log(JSON.stringify(this.addProjectUserDtoList), 'cehngyuan2');
    },
    getmember(id, index) {
      // console.log(id);
      this.activeIndex = index;
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handelDel(id) {
      // console.log(id);
    },
    // 添加项目负责人
    getboxValue(e, item) {
      this.chargeRoleNameList.name = item.name;
      this.chargeRoleNameList.avatar = item.avatar;
      this.chargeRoleNameList.id = item.id;
      item.checked = true;
      // console.log('cahr', this.chargeRoleNameList);
    },
    // // 添加项目成员
    getboxValue1(e, item) {
      // console.log(item, '添加项目成员角色');
      if (e.target.checked) {
        item.checked = true;
        this.donemembers.push(item);
      } else {
        const new1 = this.donemembers.filter(dm1 => {
          return dm1.id !== item.id;
        });
        this.donemembers = new1;
      }
      if (item.evaluationroleList) {
        item.evaluationroleList.forEach(val => {
          if (val.checked === true) {
            // console.log(val);
            item['roleName'] = val.name;
            item['evaluationroleid'] = val.id;
          }
        });
      }
    },
    // 新建项目
    newProject() {
      if (!this.newData.project.level) {
        this.newData.project.level = 1;
      }
      this.addProjectUserDtoList.push({ projectuser: { type: 3, userid: Number(sessionStorage.getItem('userid')) } });
      this.addProjectUserDtoList = [...this.addProjectUserDtoList, ...this.changeManagerList, ...this.changeMembersList];
      // console.log(this.addProjectUserDtoList, '数组2');
      this.newData.project.logo = this.value;
      this.newData.userType = sessionStorage.getItem('usertype');
      this.newData.project.evaluationid = this.value1;
      this.newData.project.createdid = sessionStorage.getItem('userid');
      this.newData.addProjectUserDtoList = this.addProjectUserDtoList;

      let val = JSON.stringify(this.newData);
      buildProject(val).then(res => {
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '新建内容已保存!'
          });
          // setTimeout(() => {
          //   this.$router.go('/project');
          // }, 1000);
          if (res.data.type === 1) {
            this.$router.push({
              name: 'Prodetail',
              params: {
                projectId: res.data.id,
                projectLabel: res.data.label,
                index: 0,
                currentView: 'survey'
              }
            });
            localStorage.setItem('projectId', res.data.id);
          } else {
            this.$router.push({
              name: 'Agileproject',
              params: {
                projectId: res.data.id,
                projectLabel: res.data.label,
                index: 0,
                currentView: 'survey'
              }
            });
            localStorage.setItem('projectId', res.data.id);
          }
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: res.msg
          });
        }
      });
    },
    // 打开选择负责人模态框
    selectManagers() {
      this.$refs.child.openSelectRole(this.value1, this.getManagersList);
    },
    // 获取到用户选择的负责人
    getManages(val) {
      // console.log(val);
      this.getManagersList = val;
      this.$forceUpdate();
      if (val.length === 0) {
        return;
      }
      // 如果选了角色
      if (val[0].evaluationroleList.length > 0) {
        let role = {}; // 用于保存负责人角色
        val[0].evaluationroleList.forEach(item => {
          if (item.checked === true) {
            role = item;
          }
        });
        // console.log(role);
        // 成功转换后的负责责任数组
        this.changeManagerList = [{projectuser: {type: 2, userid: val[0].id}, projectuserroleList: [{evaluationroleid: role.id, rolename: role.name}]}];
      } else { // 如果没选角色
        this.changeManagerList = [{projectuser: {type: 2, userid: val[0].id}, projectuserroleList: []}];
      }
      // console.log(this.changeManagerList);
    },
    // 选择成员打开模态框
    selectMembers() {
      this.$refs.childMember.openSelectMember(this.value1, this.getMemberList);
    },
    // 获取到用户选择的成员
    getMembers(val) {
      // console.log(val);
      this.changeMembersList = [];
      this.getMemberList = val;
      this.$forceUpdate();
      // console.log(this.changeMembersList);
      val.forEach(item => {
        this.changeMembersList.push({projectuser: {type: 1, userid: item.id}, projectuserroleList: [], List: [...item.evaluationroleList]});
      });
      // console.log(this.changeMembersList);
      this.changeMembersList.forEach((item, index) => {
        item.List.forEach(ele => {
          if (ele.checked === true) {
            // console.log(ele.name);
            // item.projectuserroleList = [];
            item.projectuserroleList.push({
              'evaluationroleid': ele.id,
              'rolename': ele.name
            });
          }
        });
      });
      // console.log(this.changeMembersList);
      this.changeMembersList.forEach(item => {
        delete item.List;
      });
      // console.log(this.changeMembersList);
    }
  }
};

</script>

<style lang="less" scoped>
.survey {
  width: 100%;
  margin: 0 auto;
  min-height: 836px;
  background-color: #ffffff;
  box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
    1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  border-radius: 0 5px 5px 5px;
  .firstinfo {
    text-align: center;
    padding: 20px;
    position: relative;
    margin-bottom: 20px;
    .title {
      width: 100%;
      height: 45px;
      margin: 0 auto;
      margin-bottom: 38px;
      position: relative;
      .des {
        max-width: 480px;
        height: 50px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        // .proimg {
        //   width: 100%;
        //   height: 100%;
        //   background-color: #2fc0e0;
        // }
        .avatar {
          width: 41px;
          height: 41px;
          position: absolute;
          left: 20%;
          top: 15%;
        }
        img {
          width: 45px;
          height: 45px;
        }
        .text {
          margin-left: 20px;
          text-align: left;
          p {
            margin: 0;
            font-size: 16px;
            font-weight: 400;
            color: #222222;
            line-height: 28px;
          }
          span {
            font-size: 12px;
            font-weight: 400;
            color: #555555;
            line-height: 20px;
          }
        }
        .level {
          align-self: flex-start;
          text-align: center;
          font-size: 12px;
          font-family: SukhumvitSet-Bold, SukhumvitSet;
          font-weight: bold;
          color: #ffffff;
          line-height: 21px;
          font-weight: bold;
          width: 60px;
          height: 21px;
          border-radius: 10px;
          margin-top: 5px;
          margin-left: 20px;
        }
        .LvOne {
          background: #c5f5d1;
        }
        .LvTwo {
          background: #f7cbd2;
        }
        .LvThree {
          background: #cbd5f5;
        }
      }
    }
    .modify {
      width: auto;
      height: 45px;
      position: absolute;
      top: 0px;
      right: 0px;
      button {
        width: 115px;
        height: 40px;
        font-size: 14px;
        font-weight: 400;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        margin-left: 18px;
        cursor: pointer;
      }
      .cancel {
        background: #e8f8fb;
        color: #2fc0e0;
      }
      .edit {
        background: #2fc0e0;
        color: #ffffff;
        box-shadow: 0 0 5px #2fc0e0;
      }
      .finish {
        background: #2fc0e0;
        color: #ffffff;
        box-shadow: 0 0 5px #2fc0e0;
      }
    }
    .infotable {
      margin-bottom: 40px;
      span {
        font-size: 12px;
        color: #333333;
      }
      table {
        width: 100%;
        border-top: 1px solid #f1f4ff;
        border-left: 1px solid #f1f4ff;
        tr {
          td {
            padding-left: 20px;
            height: 60px;
            text-align: left;
            border-bottom: 1px solid #f1f4ff;
            border-right: 1px solid #f1f4ff;
            .diaheader {
              width: 100%;
              height: 60px;
              background: #f1f5ff;
              text-align: center;
              line-height: 60px;
              color: #333;
              font-weight: bold;
              font-size: 14px;
            }
            .diaheader {
              width: 100%;
              height: 60px;
              background: #f1f5ff;
              text-align: center;
              line-height: 60px;
              color: #333333;
              font-weight: bold;
              font-size: 14px;
            }
            .diacontentbox {
              padding: 20px;
              // width: calc(100% - 40px);
              box-sizing: border-box;

              .hadchoosenmembers {
                height: 90px;
                width: 100%;
                overflow-x: auto;
                display: flex;
                .choosenmem {
                  width: 70px;
                  text-align: center;
                  p {
                    width: 100%;
                    height: 15px;
                    margin: 0;
                    text-align: center;
                    font-size: 12px;
                    color: #555;
                  }
                  img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50px;
                  }
                }
              }
            }
            .searchbox {
              margin-top: 15px;
              .inputborder {
                margin: 0 auto;
                width: calc(100% - 40px);
                height: 50px;
                // background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
                border-radius: 25px;
                position: relative;
              }
              .search {
                outline: none;
                width: 100%;
                margin: 0 auto;
                height: 44px;
                border: 1px solid #eeeeee;
                border-radius: 25px;
                background-clip: padding-box;
                text-align: center;
              }
              .icon {
                display: inline-block;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: #2fc0e0;
                border-radius: 50%;
                color: #fff;
                position: absolute;
                right: 5px;
                top: 5px;
              }
            }
            .diacontent {
              width: 100%;
              height: 350px;
              margin: 0 auto;
              overflow-y: auto;
              ul {
                width: 100%;
                li {
                  width: 100%;
                  padding: 20px 0;
                  display: inline-block;
                  border-bottom: 1px solid #f2f2f2;
                  height: 60px;
                  line-height: 60px;
                  display: flex;
                  align-items: center;
                  position: relative;
                  .memberName {
                    margin: 0 20px;
                    color: #333333;
                    font-size: 14px;
                    font-weight: bold;
                  }
                  .checkBoxs {
                    width: 25px;
                    height: 25px;
                    position: absolute;
                    right: 20px;
                  }
                  div {
                    background: #f2f2f2;
                    width: 100px;
                    height: 40px;
                    margin: 0 15px;
                    border-radius: 11px;
                    text-align: center;
                    line-height: 40px;
                    color: #555;
                    font-size: 14px;
                    cursor: pointer;
                  }
                  .first {
                    background: #ffd167;
                    color: #fff;
                  }
                }
              }
            }
            input {
              border: none;
              width: 80%;
              height: 80%;
              outline: none;
              transition: all 0.3s;
              border-radius: 5px;
            }

            select {
              border: none;
              width: 65%;
              height: 80%;
              outline: none;
              transition: all 0.3s;
              border-radius: 5px;
            }
            select:hover {
              box-shadow: 2px 2px 4px 0px #2fc0e0;
            }
            .missioner {
              display: flex;
              align-items: center;
              .editspan {
                margin: 0 10px;
                display: inline-block;
                width: 100px;
                height: 40px;
                background: #e8f8fb;
                border-radius: 4px;
                color: #555;
                line-height: 40px;
                text-align: center;
              }
              .missionerinfo {
                display: inline-block;
                text-align: center;
                p {
                  margin: 0;
                  font-size: 12px;
                  color: #555;
                }
                img {
                  width: 45px;
                  height: 45px;
                  border-radius: 50%;
                  box-shadow: 1px 1px 3px #d7d7d7;
                }
              }
              .moremissioner {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #e8f8fb;
                box-shadow: 1px 1px 3px #d7d7d7;
                border: 3px solid #ffffff;
                color: #2fc0e0;
                text-align: center;
                line-height: 40px;
                span {
                  font-size: 12px;
                  color: #2fc0e0;
                }
              }
              img {
                width: 70px;
                height: 70px;
                margin: 0 10px;
              }
              .choosemember {
                cursor: pointer;
                width: 40px;
                height: 40px;
              }
            }
            .domany {
              // border: 1px solid #6c59cc;
              width: 150px;
              height: 24px;
              // border-radius: 16px;
              margin: 0 10px;
              // padding: 4px;
              // .many {
              //   display: inline-block;
              //   height: 100%;
              //   background-image: linear-gradient(
              //     270deg,
              //     #1160cf 0%,
              //     #cd06bf 100%
              //   );
              //   border-radius: 12px;
              //   text-align: center;
              //   vertical-align: top;

              //   color: black;
              //   line-height: 24px;
              // }
            }
            .manystatus {
              display: inline-block;
              color: #555;
              font-size: 14px;
            }
            .manystatus::before {
              content: "";
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: #555555;
              margin-right: 3px;
              box-shadow: 0 0 3px #555555;
            }
          }
          td:focus-within {
            box-shadow: inset 0px 1px 4px 0px #2fc0e0,
              inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
              inset -1px 0px 4px 0px #2fc0e0;
          }
        }
      }
    }
    /deep/.el-dialog__wrapper {
      text-align: center;
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
      }
    }
  }
}
.funmodule {
  // width: 1840px;
  width: 100%;
  margin: 0 auto;
  span {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    float: left;
  }
  .addfunc {
    width: 18px;
    height: 18px;
    background: url("~@/assets/addfunction.png") no-repeat center center;
    background-size: 100% 100%;
    margin-left: 3px;
    margin-top: 2px;
    float: right;
    cursor: pointer;
  }
  .delfunc {
    width: 18px;
    height: 18px;
    background: url("~@/assets/delfunction.png") no-repeat center center;
    background-size: 100% 100%;
    margin-left: 3px;
    margin-top: 3px;
    float: right;
    cursor: pointer;
  }
  .el-table {
    margin-bottom: 30px;
    border-top: 1px solid #f1f4ff;
    border-left: 1px solid #f1f4ff;
    span {
      float: none;
      font-weight: normal;
    }
  }
}

/deep/ .el-table th {
  height: 55px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  color: #333;
  line-height: 22px;
  background: #f1f5ff;
  td {
    border-right: 1px solid #e6ebff;
    border-bottom: 1px solid #e6ebff;
  }
}
// 清除鼠标悬浮表格背景
/deep/.el-table tbody tr:hover > td {
  background-color: transparent !important;
}
// 点击编辑单元格显示蓝色边框
/deep/.el-table tbody tr > td:focus-within {
  box-shadow: inset 0px 1px 4px 0px #2fc0e0, inset 0px -1px 4px 0px #2fc0e0,
    inset 1px 0px 4px 0px #2fc0e0, inset -1px 0px 4px 0px #2fc0e0;
}
/deep/.el-select {
  width: 74px;
  height: 45px;
  border: none;
}
/deep/.el-select-dropdown__item {
  width: 68px !important;
  height: 68px !important;
  border-radius: 7px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}
/deep/.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  // width: 45px !important;
  // height: 45px !important;
  background-color: #2fc0e0;
}
/deep/.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  img {
    width: 45px !important;
    height: 45px !important;
    left: 16% !important;
    top: 17% !important;
  }
}

/deep/ .el-input__inner {
  border: none;
}
/deep/.el-select-dropdown__list {
  height: 420px !important;
}
/deep/.el-select-dropdown__wrap {
  max-height: 430px !important;
  box-shadow: 2px 2px 4px 0px rgba(169, 184, 244, 0.5) !important;
}

/deep/.el-scrollbar__bar.is-vertical {
  display: none !important;
}
// 清除input按钮
/deep/ input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>
